import React from 'react'

import {WeaTools} from 'ecCom';
let Base64 = WeaTools.Base64;


export default class ContainerViewProxy extends React.Component{

    state = {
        menuData : [],
    }

    shouldComponentUpdate(nextProps, nextState) {
        const {subMenuData,state} = this.props
        const {tabId,data} = state
        if(nextProps.state.tabId !== tabId || nextProps.state.data !== data || nextProps.subMenuData != subMenuData){
            this.setMenuData(nextProps)
        }
        return true
    }

    componentWillMount(){
        this.setMenuData(this.props);
    }

    setMenuData = (nextProps)=>{
        const {subMenuData,isSetting,location={}} = nextProps
        const {query={}} = location
        let {selectedKeys=""} = query
        if(subMenuData){
            this.setState({menuData:subMenuData})
            return
        }
        const {data,tabId} = nextProps.state
        if(data && data.items && data.items.length > 0 && data.items.find((element)=>(element.id == tabId))){
            const item = data.items.find((element)=>(element.id == tabId))
            if(item.setting.customMenuId){
                WeaTools.callApi('/api/portalTsLogin/utils/findCustomMenu', 'GET', {id:item.setting.customMenuId}).then((result) => {
                    this.setState({menuData:result.data})
                    if(result.data.length > 0 && isSetting!=true){

                        if(selectedKeys != "" ){
                            selectedKeys = JSON.parse(selectedKeys)

                            if(selectedKeys.length ==2 ){

                                let temp = {menuItem:null}
                                this.findMenuItemOfId(result.data,selectedKeys[0],temp)
                                if(temp.menuItem){
                                    this.handlerMenuItemOnClick(temp.menuItem,selectedKeys[1])
                                }
                                if(result.data.find((item)=>item.id==selectedKeys[1])){
                                    for(let i = 0 ;i< result.data.length ;i++){
                                        if(result.data[i].id == selectedKeys[1]) {
                                            window.portalTs.element.menuPerfect.setSubMenuPerfectData(result.data[i].id,result.data[i].items)
                                        }
                                    }
                                }
                            }else if(selectedKeys.length == 1){
                                let temp = {menuItem:null}
                                this.findMenuItemOfId(result.data,selectedKeys[0],temp)
                                if(temp.menuItem){
                                    this.handlerMenuItemOnClick(temp.menuItem)
                                    window.portalTs.element.menuPerfect.setSubMenuPerfectData(temp.menuItem.id,temp.menuItem.items)
                                }

                            }

                        }else{
                            this.openFirstMenuItem(result.data[0],result.data[0].id+'')
                        }

                    }
                });

            }
        }
    }

    componentWillMount(){
        const {onLoad,subMenuData,state} = this.props
        const {data} = state
        const {id} = data
        if(!subMenuData){
            window.portalTs.element.menuPerfect.onloads[id] = onLoad
        }
        this.setMenuData(this.props);

    }

    openFirstMenuItem = (item,sid)=>{
        if(item.items && item.items.length > 0){
            this.handlerSubMenuOnClick(item,sid);
        }else{
            this.handlerMenuItemOnClick(item,sid)
        }
        if(window.portalTs.element.menuPerfect.setSubMenuPerfectData){
            window.portalTs.element.menuPerfect.setSubMenuPerfectData(item.id,item.items)
        }
    }

    handlerMenuItemOnClick = (menuItem,sid)=>{
        const {layoutType} = this.props
        let {id,url,openType} = menuItem
        if(openType !='mainFrame'){
            return
        }
        let temp = []
        temp.push(id+"")
        if(sid != id){
            temp.push(sid)
        }



        if(url && url != ''){
            if(openType == 'mainFrame'){
                const urlObj = WeaTools.checkStdRouter(url) || {};
                if(urlObj.isRouter && urlObj.url){
                    url = urlObj.url;
                    $(".custom-element-menu-page .route").show()
                    $(".custom-element-menu-page .iframe").hide()
                    weaHistory.push({pathname:url+(url.indexOf("?") == -1 ? "?": "&")+"selectedKeys="+JSON.stringify(temp)})
                }else{
                    $(".custom-element-menu-page .route").hide()
                    $(".custom-element-menu-page .iframe").show()
                    if(layoutType === 'theme'){
                        weaHistory.push({pathname:'/main?selectedKeys='+JSON.stringify(temp)})
                    }else{
                        weaHistory.push({pathname:'/?selectedKeys='+JSON.stringify(temp)})
                    }
                    $("#custom-element-menu-iframe").attr({src:url})
                }
            }else if( openType == '_blank'){
                window.open(url,'_blank')
            }else if(openType == '_parent'){
                location.href = url
            }
        }
        this.setState({selectedKeys:id+''})
    }

    handlerSubMenuOnClick = (item,sid)=>{
        const {data} = this.props
        let menuItem = this.findMenuItemOfSubMenu(item)
        this.handlerMenuItemOnClick(menuItem,sid)
    }



    findMenuItemOfSubMenu = (item)=>{
        if(item.items && item.items.length > 0){
            return this.findMenuItemOfSubMenu(item.items[0])
        }else{
            return item
        }
    }

    findMenuItemOfId = (items,selectedKeys,result)=>{
        for(let i =0 ;i< items.length; i++){
            if(items[i].items.length >0){
                this.findMenuItemOfId(items[i].items,selectedKeys,result)
            }else{
                if(items[i].id == selectedKeys){
                    result.menuItem = items[i]
                }
            }

        }


    }

    render(){
        const {menuData,selectedKeys} = this.state
        const {ContainerView} = this.props
        const {data,tabId} = this.props.state
        const {items} = data


        return (
            <ContainerView ecId={`${this && this.props && this.props.ecId || ''}_ContainerView@roaa8c`} ref='ContainerView' {...this.props} menuData={menuData} selectedKeys={selectedKeys}></ContainerView>
        )
    }
}

window.portalTs = (window.portalTs && window.portalTs.element) ? (
    {
        element:{
            ...window.portalTs.element,
            menuPerfect:{
                openSubMenuPerfect: 0,
                onloads:{},
                reflush: ()=>{
                    if(window.portalTs.element.menuPerfect.onloads  && typeof window.portalTs.element.menuPerfect.onloads  == 'object') {
                        for (let i in window.portalTs.element.menuPerfect.onloads) {
                            if (typeof window.portalTs.element.menuPerfect.onloads [i] == 'function') {
                                window.portalTs.element.menuPerfect.onloads[i]()
                            }
                        }
                    }
                },
            }
        }
    }
) : (
    {
        element:{
            menuPerfect:{
                openSubMenuPerfect: 0,
                onloads:{},
                reflush: ()=>{
                    if(window.portalTs.element.menuPerfect.onloads  && typeof window.portalTs.element.menuPerfect.onloads  == 'object') {
                        for (let i in window.portalTs.element.menuPerfect.onloads) {
                            if (typeof window.portalTs.element.menuPerfect.onloads [i] == 'function') {
                                window.portalTs.element.menuPerfect.onloads[i]()
                            }
                        }
                    }
                },
            }
        }
    }
)


